import 'package:ball_lion/widgets/base/wqs_indicator.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:ball_lion/module/team/soccer/zq_team_detail_logic.dart';
import 'package:ball_lion/resources/colours.dart';
import 'package:ball_lion/resources/styles.dart';
import 'package:ball_lion/utils/utils.dart';

import 'package:ball_lion/widgets/base/wqs_text.dart';

class SoccerTeamDetailPage extends StatefulWidget {
  const SoccerTeamDetailPage({super.key});

  @override
  State<SoccerTeamDetailPage> createState() => _SoccerTeamDetailPageState();
}

class _SoccerTeamDetailPageState extends State<SoccerTeamDetailPage>
    with TickerProviderStateMixin {
  int teamId = Get.arguments;
  SoccerTeamDetailLogic logic =
      Get.put(SoccerTeamDetailLogic(), tag: '${Get.arguments}');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      primary: false,
      body: GetBuilder<SoccerTeamDetailLogic>(
          tag: teamId.toString(),
          builder: (controller) {
            return Stack(
              children: [
                Column(
                  children: [header(), body()],
                ),
                Positioned(
                    top: 0,
                    left: 0,
                    right: 0,
                    child: Styles.appBar(
                        systemUiOverlayStyle: const SystemUiOverlayStyle(
                            statusBarIconBrightness: Brightness.light),
                        backgroundColor: Colours.transparent,
                        leadingColor: Colours.white)),
              ],
            );
          }),
    );
  }

  header() {
    return Container(
        width: Get.width,
        padding: EdgeInsets.only(
            top: MediaQuery.of(context).padding.top + kToolbarHeight),
        decoration: const BoxDecoration(
            gradient: LinearGradient(
          colors: [Color(0xFF2676FF), Color(0xFF134FE9)],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        )),
        // image: DecorationImage(
        //     image: AssetImage(Utils.getImgPath('team_header.png')),
        //     alignment: Alignment.bottomCenter,
        //     fit: BoxFit.cover)),
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 20, right: 20),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          QsText(logic.data?.nameChs ?? "",
                              color: Colours.N1,
                              fontSize: 22,
                              fontWeight: FontWeight.w500),
                          QsText(
                            logic.data?.nameEn ?? "",
                            color: Colours.N1.withOpacity(0.6),
                            fontSize: 12,
                          ),
                        ],
                      ),
                      const SizedBox(height: 20),
                      Row(
                        children: [
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              QsText(
                                logic.data?.rankName ?? '-',
                                color: Colours.N1,
                                fontSize: 20,
                                fontWeight: FontWeight.w800,
                              ),
                              const SizedBox(height: 4),
                              QsText(
                                logic.data?.rankLeagueName ?? '-',
                                color: Colours.N1.withOpacity(0.6),
                                fontSize: 10,
                                needCenter: true,
                              )
                            ],
                          ),
                          Container(
                            margin: const EdgeInsets.symmetric(
                                horizontal: 16, vertical: 0),
                            width: 0.5,
                            height: 24,
                          ),
                          Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                QsText(
                                  logic.getRecentStatus() ?? '',
                                  color: Colours.white,
                                  fontSize: 20,
                                  fontWeight: FontWeight.w600,
                                ),
                                const SizedBox(height: 4),
                                QsText(
                                  '近期状态',
                                  color: Colours.white.withOpacity(0.6),
                                  fontSize: 10,
                                  needCenter: true,
                                )
                              ]),
                        ],
                      ),
                      const SizedBox(height: 20),
                    ],
                  ),
                  logic.data?.logo == null
                      ? Styles.placeholderIcon(width: 80, height: 80)
                      : CachedNetworkImage(
                          imageUrl: logic.data?.logo ?? '',
                          width: 80,
                          height: 80,
                          fit: BoxFit.contain,
                          placeholder: (context, url) =>
                              Styles.placeholderIcon(),
                          errorWidget: (context, url, error) => Image.asset(
                            Utils.getImgPath("zq_placeholder.png"),
                            fit: BoxFit.fitWidth,
                          ),
                        ),
                ],
              ),
            ),
          ],
        ));
  }

  body() {
    return Expanded(
      child: Container(
        color: Colours.N1,
        child: Column(children: [
          Container(
            color: Color(0xFF226EF0),
            height: 38,
            child: Styles.tabbar(
                tabs: logic.tabs.map((f) => QsText(f)).toList(),
                labelColor: Colours.N1,
                indicator: QsIndicator(
                    borderSide: const BorderSide(color: Colours.N1, width: 3),
                    indicatorWidth: 16,
                    indicatorBottom: 3),
                unselectedLabelColor: Colours.N1.withOpacity(0.6),
                controller: logic.tabController,
                onTap: (value) {
                  Utils.onEvent('sjpd_qdxq', params: {'sjpd_qdxq': '$value'});
                  // controller.currentIndex = value;
                },
                fontSize: 16,
                // labelPadding: const EdgeInsets.symmetric(horizontal: 13),
                scrollable: false),
          ),
          Expanded(
              child: TabBarView(
                  controller: logic.tabController,
                  children: List.generate(
                      logic.tabs.length, (index) => logic.pages[index])))
        ]),
      ),
    );
  }
}
